<!-- 搜索组件 -->
  <!--<template>
 <section class="search">
    <HeadTop :title="'搜索'">
    </HeadTop>
    <form class="search_form" action="#">
      <input type="search" name="search" placeholder="请输入商家或美食名称" class="search_input">
      <input type="submit" name="submit" class="search_submit">
    </form>
  </section>  
</template>-->  
<template>
  <section class="search">
    <HeadTop :title="'搜索'" />
    <form class="search_form">
      <input type="search" v-model="keyword" placeholder="请输入商家名称" class="search_input">
      <input type="submit" class="search_submit" @click.prevent="searchKeyword">
    </form>

    <section class="list wrapper" style="height: 522.2px" v-if="isShowShopsList">
      <ul class="list_container">
        <li class="list_li" v-for="(shop , index) in searchShops" :key="index">
          <section class="item_left">
            <img :src="imgBaseUrl + shop.image_path" class="restaurant_img">
          </section>
          <section class="item_right">
            <div class="item_right_text">
              <p><span>aaa</span> </p>
              <p>月售 {{shop.recent_order_num}} 单</p>
              <p>{{shop.float_minimum_order_amount}}} 元起送 / 距离 {{shop.distance}} 公里</p>
            </div>
          </section>
        </li>
      </ul>
    </section>
    <div class="search_none" v-show="!isShowShopsList">很抱歉！无搜索结果</div>
  </section>
</template>

<script>
import HeadTop from '@/components/HeadTop/HeadTop'
import { mapState } from 'vuex'
import BScroll from '@better-scroll/core'

export default {
    data() {
        return {
            keyword: '',
            imgBaseUrl: 'http://cangdu.org:8001/img/',
            isShowShopsList: true
        }
    },

    components: {
        HeadTop,
    },

    computed: {
        ...mapState(['searchShops']),
    },

    mounted() {
        if (!this.searchShops.length) {
            return
        }
        this._initBCscoll()
    },

    watch: {
        searchShops(value) {
          if (!value.length) {
            this.isShowShopsList = false
          } else {
            this.isShowShopsList = true
            this.$nextTick(() => {
                this._initBCscoll()
            })
          }
        },
    },

    methods: {
        // _ 用来与监听事件进行区分
        _initBCscoll() {
          new BScroll('.wrapper' , {
            click: true
          })
            // if (!this.bcroll) {
            //     console.log('new')
            //     this.bcroll = new BScroll('.list', {
            //         click: true,
            //         scrollY: true,
            //     })
            // } else {
            //     console.log('ref')
            //     this.bcroll.refresh()
            // }
        },
        searchKeyword() {
            // 这里需要进行什么操作?
            const { keyword } = this
            //     this.$store.dispatch('getShopRatings', () => {
            //     this.$nextTick(() => {
            //         new BScroll(this.$refs.ratings, {
            //             click: true,
            //         })
            //     })
            // })
            // 使用当前的 keyword , 进行调用
            // this.isShowShopsList = false
            this.$store.dispatch('searchShops', keyword)
            /* , () => {
                this.$nextTick(() => {
                    if (!this.bcroll) {
                        console.log('new')
                        this.bcroll = new BScroll('.wapper', {
                            click: true,
                        })
                    } else {
                        console.log('ref')
                        this.bcroll.refresh()
                    }
                    console.log(this)
                })
            } */
        },
    },
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../common/stylus/mixins.styl';

.search {
  .header {
    background-color: #02a774;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 45px;

    .header_search {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 10%;
      height: 50%;

      .icon-sousuo {
        font-size: 25px;
        color: #fff;
      }
    }

    .header_title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
      color: #fff;
      text-align: center;

      .header_title_text {
        font-size: 20px;
        color: #fff;
        display: block;
      }
    }

    .header_login {
      font-size: 14px;
      color: #fff;
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);

      .header_login_text {
        color: #fff;
      }
    }
  }

  width: 100%;
  height: 100%;
  overflow: hidden;

  .search_form {
    clearFix();
    margin-top: 45px;
    background-color: #fff;
    padding: 12px 8px;

    input {
      height: 35px;
      padding: 0 4px;
      border-radius: 2px;
      font-weight: bold;
      outline: none;

      &.search_input {
        float: left;
        width: 79%;
        border: 4px solid #f2f2f2;
        font-size: 14px;
        color: #333;
        background-color: #f2f2f2;
      }

      &.search_submit {
        float: right;
        width: 18%;
        border: 4px solid #02a774;
        font-size: 16px;
        color: #fff;
        background-color: #02a774;
      }
    }
  }

  .list {
    .list_container {
      background-color: #fff;

      .list_li {
        display: flex;
        justify-content: center;
        padding: 10px;
        border-bottom: 1px solid $bc;

        .item_left {
          margin-right: 10px;

          .restaurant_img {
            width: 50px;
            height: 50px;
            display: block;
          }
        }

        .item_right {
          font-size: 12px;
          flex: 1;

          .item_right_text {
            p {
              line-height: 12px;
              margin-bottom: 6px;

              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }

  .search_none {
    margin: 0 auto;
    color: #333;
    background-color: #fff;
    text-align: center;
    margin-top: 0.125rem;
  }
}
</style>